import React, { FC, useEffect } from 'react';
import { Istate, connect, ConnectProps, Loading } from 'umi';
import { Spin } from 'antd';
// ConnectProps Api 可以快速的拿到想要的，dispatch，match，location，等Api

// const mapstateToProps = () => {

// }

// const mapDispatchToProps = () => {

// }

interface Iprops extends ConnectProps {
  data: Istate;
  loading: any;
}

const Product: FC<Iprops> = function ({ data, loading, dispatch }) {
  // console.log(props)

  useEffect(() => {
    dispatch!({ type: 'product/getProductList' });
  }, []);
  console.log(data.err);

  let html;
  if (data.err) {
    html = <h1>{data.err}</h1>;
  } else {
    html = (
      <fieldset>
        <legend>商品</legend>
        <h1>商品列表</h1>
        <ul>
          {(data.productList as []).map((item: any) => {
            return <li key={item.id}>{item.title}</li>;
          })}
        </ul>
      </fieldset>
    );
  }

  return (
    <Spin spinning={loading} size="large">
      {html}
    </Spin>
  );
};

export default connect(
  ({ product, loading }: { product: Istate; loading: Loading }) => ({
    data: product,
    loading: loading.models.product,
  }),
)(Product);
